<template>
    <div class="material-manager table-content">
        <pui-dialog :maskClick="false" :title="props.title" v-model="componentRef.dialogVisible" :animate="props.animate" width="860px" isFooter>
            <template #content>
                <div class="material-manager_content">
                    <div class="top">
                        <div class="left">
                            <div class="title">材料列表</div>
                            <div class="table-container">
                                <div class="thead">
                                    <div class="index">序号</div>
                                    <div class="name">材料名称</div>
                                    <div class="color">材料呈现颜色</div>
                                </div>
                                <div class="nodata" v-if="!componentRef.materials || componentRef.materials.length < 1"> -- 暂 无 数 据 --</div>
                                <div :class="['td', componentRef.currentMaterialIndex === i && 'active']" v-for="(item, i) in componentRef.materials" :key="i" @click="chooseMaterial(item, i)">
                                    <div class="index">
                                        <span>{{ i < 9 ? '0' + (i + 1) : (i + 1) }}</span>
                                    </div>
                                    <div class="name">
                                        <span v-if="!item.edit">{{ item.name }}</span>
                                        <input v-else type="text" class="pui-input" v-model="item.name">
                                    </div>
                                    <div class="color">
                                        <span v-if="!item.edit">{{ item.color }}</span>
                                        <input v-else type="text" class="pui-input" v-model="item.color">
                                    </div>
                                </div>
                            </div>
                            <div class="btn-box">
                                <pui-button size="small" @click="editMaterial" :disabled="!componentRef.currentMaterialIndex && componentRef.currentMaterialIndex !== 0">编辑</pui-button>
                                <pui-button size="small" type="primary" @click="addAttribute" :disabled="!componentRef.currentMaterialIndex && componentRef.currentMaterialIndex !== 0">添加</pui-button>
                                <pui-button size="small" type="danger" @click="deleteMaterial" :disabled="!componentRef.currentMaterialIndex && componentRef.currentMaterialIndex !== 0">删除</pui-button>
                            </div>
                        </div>
                        <div class="center">
                            <pui-button style="margin-bottom: 10px;" icon="arrow-right" :disabled="true"></pui-button>
                            <pui-button icon="arrow-right" :disabled="true"></pui-button>
                        </div>
                        <div class="right">
                            <div class="title">材料属性列表</div>
                            <div class="table-container" ref="property">
                                <div class="thead">
                                    <div class="index">序号</div>
                                    <div class="length">波长</div>
                                    <div class="re">Re(index)</div>
                                    <div class="im">Im(index)</div>
                                </div>
                                <div class="nodata" v-if="!componentRef.currentMaterial || !componentRef.currentMaterial.properties || componentRef.currentMaterial.properties && componentRef.currentMaterial.properties.length < 1"> -- 暂 无 数 据 --</div>
                                <div :class="['td', componentRef.currentAttributeIndex === i && 'active']" v-for="(item, i) in componentRef.currentMaterial.properties" :key="i" @click="chooseAttribute(item, i)">
                                    <div class="index">
                                        <span>{{ i < 9 ? '0' + (i + 1) : (i + 1) }}</span>
                                    </div>
                                    <div class="length">
                                        <span v-if="!item.edit">{{ item.waveLength }}</span>
                                        <input v-else type="text" class="pui-input" v-model="item.waveLength">
                                    </div>
                                    <div class="re">
                                        <span v-if="!item.edit">{{ item.real }}</span>
                                        <input v-else type="text" class="pui-input" v-model="item.real">
                                    </div>
                                    <div class="im">
                                        <span v-if="!item.edit">{{ item.imag }}</span>
                                        <input v-else type="text" class="pui-input" v-model="item.imag">
                                    </div>
                                </div>
                            </div>
                            <div class="btn-box">
                                <pui-button size="small" @click="editAttribute" :disabled="!componentRef.currentAttributeIndex && componentRef.currentAttributeIndex !== 0 && componentRef.deleteMaterailList.length === 0 && componentRef.deletePropertyList.length">编辑</pui-button>
                                <pui-button size="small" type="danger" @click="deleteAttribute" :disabled="!componentRef.currentAttributeIndex && componentRef.currentAttributeIndex !== 0">删除</pui-button>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template #footer>
                <!-- <pui-button>导出材料</pui-button>
                <pui-button>导入材料</pui-button> -->
                <pui-button type="primary" @click="saveMaterial">保存</pui-button>
                <pui-button @click="closeDialog">取消</pui-button>
            </template>
        </pui-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'TaskManagement'
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance, nextTick } from 'vue'
import { MaterialProperty, Material } from './models/material'
import { deviceManager } from "@/services/phot_client/device";
import { PhotMaterial, PhotMaterialProperty } from "@/common/types/phot_types"
import { uid_rt } from "@/common/types/base_types"
const { proxy } = getCurrentInstance() as any
const props = defineProps({
    title: {
        type: String,
        default: '材料库'
    },
    animate: {
        type: String,
        default: 'fade'
    }
})
const componentRef = reactive({
    dialogVisible: false,
    materials: [],
    currentMaterial: {},
    currentMaterialIndex: null,
    currentAttribute: {},
    currentAttributeIndex: null,
    deleteMaterailList: [],
    deletePropertyList: [],
}) as any
const init = async () => {
    componentRef.dialogVisible = true
    componentRef.materials = []
    componentRef.currentMaterial = {}
    componentRef.currentMaterialIndex = null
    componentRef.currentAttributeIndex = null
    componentRef.currentAttribute = {}
    componentRef.deleteMaterailList = []
    componentRef.deletePropertyList = []
    proxy.$loading.open()
    componentRef.materials = await deviceManager.getMaterials()
    proxy.$loading.close()
}
const closeDialog = () => {
    componentRef.dialogVisible = false
}
const chooseMaterial = (item: any, i: any) => {
    componentRef.currentMaterial = item
    componentRef.currentMaterialIndex = i
    componentRef.currentAttributeIndex = null
    componentRef.currentAttribute = {}
}
const chooseAttribute = (item: any, i: any) => {
    componentRef.currentAttribute = item
    componentRef.currentAttributeIndex = i
}
const editMaterial = () => {
    componentRef.currentMaterial.edit = true
}
const deleteMaterial = () => {
    componentRef.deleteMaterailList.push(componentRef.currentMaterial)
    componentRef.materials.splice(componentRef.materials.findIndex((item: any) => item.name === componentRef.currentMaterial.name), 1)
    componentRef.currentMaterialIndex = null
    componentRef.currentMaterial = {}
    componentRef.currentAttributeIndex = null
    componentRef.currentAttribute = {}
}
const addAttribute = async () => {
    const attribute = Object.assign(new PhotMaterialProperty(), {edit: true, propertyId: uid_rt()})
    componentRef.currentMaterial.properties.push(attribute)
    await nextTick()
    proxy.$refs.property.scrollTop = proxy.$refs.property.scrollHeight
}
const editAttribute = () => {
    componentRef.currentAttribute.edit = true
}
const deleteAttribute = () => {
    const index = componentRef.currentMaterial.properties.findIndex((item: any) => item.propertyId === componentRef.currentAttribute.propertyId)
    if (index < 0) return
    const hasProperty = componentRef.deletePropertyList.filter((item: any) => item.materialName === componentRef.currentMaterial.name)
    if (hasProperty.length > 0) {
        hasProperty[0].properties.push(componentRef.currentAttribute)
    } else {
        componentRef.deletePropertyList.push({
            materialName: componentRef.currentMaterial.name,
            materialId: componentRef.currentMaterial.id,
            properties: [componentRef.currentAttribute]
        })
    }
    componentRef.currentMaterial.properties.splice(index, 1)
    componentRef.currentAttributeIndex = null
    componentRef.currentAttribute = {}
}
const saveMaterial = async () => {
    proxy.$loading.open('正在保存...')
    for (const material of componentRef.materials) {
        if (material.edit) {
            delete material.edit
            await deviceManager.updateMaterial(material)
        }
        for (const property of material.properties) {
            if (property.edit) {
                delete property.edit
                await deviceManager.updateMaterialProperty(material.name, property)
            }
        }
    }
    for (const delMaterial of componentRef.deleteMaterailList) {
        const index = componentRef.deletePropertyList.findIndex((item: any) => item.materialName === delMaterial.name)
        if (index > -1) {
            componentRef.deletePropertyList.splice(index, 1)
        }
        await deviceManager.deleteMaterial(delMaterial.name)
    }
    for (const delProperty of componentRef.deletePropertyList) {
        for (const property of delProperty.properties) {
            await deviceManager.deleteMaterialProperty(delProperty.materialName, property.propertyId)
        }
    }
    proxy.$loading.close()
    proxy.$toast({
        value: '保存成功',
        type: 'success'
    })
}
defineExpose({
    init,
    closeDialog
})
</script>